<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Dropdown | Semantic UI</title>

<meta name="description" content="A dropdown allows a user to select a value from a series of options" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="dropdown" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="active item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Dropdown
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="active item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <link rel="stylesheet/less" type="text/css" href="/src/definitions/modules/dropdown.less" />
<script src="/javascript/dropdown.js"></script>




<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Dropdown
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A dropdown allows a user to select a value from a series of options
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/modules/dropdown.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Dropdown] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Dropdown should do this%0A%0A**Result**%0AThe Dropdown does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
<!--       <a href="/module.html" class="ui right floated basic right labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
      </a> -->
      
      
      <div class="ui floating dropdown theme basic button" data-element="dropdown" data-type="module">
        <span class="text">3 Themes</span>
        <div class="menu transition hidden">
          
            <div class="item" data-value="Default" data-text="Default Theme">Default</div>
          
            <div class="item" data-value="GitHub" data-text="GitHub Theme">GitHub</div>
          
            <div class="item" data-value="Material" data-text="Material Theme">Material</div>
          
        </div>
      </div>
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Dropdown</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Dropdown/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Dropdown/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-dropdown">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-dropdown">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Dropdown.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
        
      
        
      
      <div class="ui four item stackable tabs menu">
        
          <a class="active item" data-tab="definition">Definition</a>
          
        
          <a class="item" data-tab="examples">Examples</a>
          
        
          <a class="item" data-tab="usage">Usage</a>
          
        
          <a class="item" data-tab="settings">Settings</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="main ui container">

  <div class="ui active tab" data-tab="definition">
    <h2 class="ui dividing header">Types</h2>

    <div class="simple example">
      <h4 class="ui header">Dropdown</h4>
      <p>A dropdown</p>
      <div class="ui dropdown">
        <div class="text">File</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">New</div>
          <div class="item">
            <span class="description">ctrl + o</span>
            Open...
          </div>
          <div class="item">
            <span class="description">ctrl + s</span>
            Save as...
          </div>
          <div class="item">
            <span class="description">ctrl + r</span>
            Rename
          </div>
          <div class="item">Make a copy</div>
          <div class="item">
            <i class="folder icon"></i>
            Move to folder
          </div>
          <div class="item">
            <i class="trash icon"></i>
            Move to trash
          </div>
          <div class="divider"></div>
          <div class="item">Download As...</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Publish To Web
            <div class="menu">
              <div class="item">Google Docs</div>
              <div class="item">Google Drive</div>
              <div class="item">Dropbox</div>
              <div class="item">Adobe Creative Cloud</div>
              <div class="item">Private FTP</div>
              <div class="item">Another Service...</div>
            </div>
          </div>
          <div class="item">E-mail Collaborators</div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Selection</h4>
      <p>A dropdown can be used to select between choices in a form</p>
      <div class="ui ignored info message">
        Selection dropdowns can be initialized directly on a <code>select</code> or with the matching HTML and a hidden <code>input</code>.
      </div>
      <div class="ui selection dropdown">
        <input type="hidden" name="gender">
        <i class="dropdown icon"></i>
        <div class="default text">Gender</div>
        <div class="menu">
          <div class="item" data-value="1">Male</div>
          <div class="item" data-value="0">Female</div>
        </div>
      </div>
    </div>
    <div class="another dropdown example">
      <select class="ui dropdown">
        <option value="">Gender</option>
        <option value="1">Male</option>
        <option value="0">Female</option>
      </select>
    </div>
    <div class="another dropdown example">
      <div class="ui fluid selection dropdown">
        <input type="hidden" name="user">
        <i class="dropdown icon"></i>
        <div class="default text">Select Friend</div>
        <div class="menu">
          <div class="item" data-value="jenny">
            <img class="ui mini avatar image" src="/images/avatar/small/jenny.jpg">
            Jenny Hess
          </div>
          <div class="item" data-value="elliot">
            <img class="ui mini avatar image" src="/images/avatar/small/elliot.jpg">
            Elliot Fu
          </div>
          <div class="item" data-value="stevie">
            <img class="ui mini avatar image" src="/images/avatar/small/stevie.jpg">
            Stevie Feliciano
          </div>
          <div class="item" data-value="christian">
            <img class="ui mini avatar image" src="/images/avatar/small/christian.jpg">
            Christian
          </div>
          <div class="item" data-value="matt">
            <img class="ui mini avatar image" src="/images/avatar/small/matt.jpg">
            Matt
          </div>
          <div class="item" data-value="justen">
            <img class="ui mini avatar image" src="/images/avatar/small/justen.jpg">
            Justen Kitsune
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Search Selection</h4>
      <p>A selection dropdown can allow a user to search through a large list of choices.</p>
      <div class="ui fluid search selection dropdown">
        <input type="hidden" name="country">
        <i class="dropdown icon"></i>
        <div class="default text">Select Country</div>
        <div class="menu">
        <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
        <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
        <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
        <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
        <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
        <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
        <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
        <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
        <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
        <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
        <div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
        <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
        <div class="item" data-value="au"><i class="au flag"></i>Australia</div>
        <div class="item" data-value="at"><i class="at flag"></i>Austria</div>
        <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
        <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
        <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
        <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
        <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
        <div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
        <div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
        <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
        <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
        <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
        <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
        <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
        <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
        <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
        <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
        <div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
        <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
        <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
        <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
        <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
        <div class="item" data-value="mm"><i class="mm flag"></i>Burma</div>
        <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
        <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
        <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
        <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
        <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
        <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
        <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
        <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
        <div class="item" data-value="td"><i class="td flag"></i>Chad</div>
        <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
        <div class="item" data-value="cn"><i class="cn flag"></i>China</div>
        <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
        <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
        <div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
        <div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
        <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
        <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
        <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
        <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
        <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
        <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
        <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
        <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
        <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
        <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
        <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
        <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
        <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
        <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
        <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
        <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
        <div class="item" data-value="gb"><i class="gb flag"></i>England</div>
        <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
        <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
        <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
        <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
        <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
        <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
        <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
        <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
        <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
        <div class="item" data-value="fr"><i class="fr flag"></i>France</div>
        <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
        <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
        <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
        <div class="item" data-value="de"><i class="de flag"></i>Germany</div>
        <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
        <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
        <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
        <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
        <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
        <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
        <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
        <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
        <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
        <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
        <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
        <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
        <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
        <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
        <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
        <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
        <div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
        <div class="item" data-value="in"><i class="in flag"></i>India</div>
        <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
        <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
        <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
        <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
        <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
        <div class="item" data-value="il"><i class="il flag"></i>Israel</div>
        <div class="item" data-value="it"><i class="it flag"></i>Italy</div>
        <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
        <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
        <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
        <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
        <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
        <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
        <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
        <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
        <div class="item" data-value="la"><i class="la flag"></i>Laos</div>
        <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
        <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
        <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
        <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
        <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
        <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
        <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
        <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
        <div class="item" data-value="mo"><i class="mo flag"></i>Macau</div>
        <div class="item" data-value="mk"><i class="mk flag"></i>Macedonia</div>
        <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
        <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
        <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
        <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
        <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
        <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
        <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
        <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
        <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
        <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
        <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
        <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
        <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
        <div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
        <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
        <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
        <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
        <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
        <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
        <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
        <div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
        <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
        <div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
        <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
        <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
        <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
        <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
        <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
        <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
        <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
        <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
        <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
        <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
        <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
        <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
        <div class="item" data-value="no"><i class="no flag"></i>Norway</div>
        <div class="item" data-value="om"><i class="om flag"></i>Oman</div>
        <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
        <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
        <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
        <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
        <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
        <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
        <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
        <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
        <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
        <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
        <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
        <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
        <div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
        <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
        <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
        <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
        <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
        <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
        <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
        <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
        <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
        <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
        <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
        <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
        <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
        <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
        <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
        <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
        <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
        <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
        <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
        <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
        <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
        <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
        <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
        <div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
        <div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
        <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spain</div>
        <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
        <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
        <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
        <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard</div>
        <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
        <div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
        <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
        <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
        <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
        <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
        <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
        <div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
        <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
        <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
        <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
        <div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
        <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
        <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
        <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
        <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
        <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
        <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
        <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
        <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
        <div class="item" data-value="us"><i class="us flag"></i>United States</div>
        <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
        <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
        <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
        <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
        <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
        <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
        <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
        <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
        <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
        <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
        <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
        <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
        <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
      </div>

      </div>
    </div>
    <div class="another dropdown example">
      <select class="ui search dropdown">
        <option value="">State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="dropdown example">
      <h4 class="ui header">Multiple Selection</h4>
      <p>A selection dropdown can allow multiple selections</p>
      <select name="skills" multiple class="ui fluid dropdown">
        <option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
<option value="ember">Ember</option>
<option value="html">HTML</option>
<option value="ia">Information Architecture</option>
<option value="javascript">Javascript</option>
<option value="mech">Mechanical Engineering</option>
<option value="meteor">Meteor</option>
<option value="node">NodeJS</option>
<option value="plumbing">Plumbing</option>
<option value="python">Python</option>
<option value="rails">Rails</option>
<option value="react">React</option>
<option value="repair">Kitchen Repair</option>
<option value="ruby">Ruby</option>
<option value="ui">UI Design</option>
<option value="ux">User Experience</option>
      </select>
    </div>
    <div class="dropdown example">
      <h4 class="ui header">Multiple Search Selection</h4>
      <p>A selection dropdown can allow multiple search selections</p>
      <select class="ui fluid search dropdown" multiple>
        <option value="">State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="another dropdown example">
      <div class="ui ignored info message">
        Dropdowns can support content that may not be allowed inside <code>option</code> tags when converting <code>select</code> elements. For more complex content like <code>flags</code> or <code>icons</code> you can use full dropdown markup
      </div>
      <div class="ui fluid multiple search selection dropdown">
        <input type="hidden" name="country">
        <i class="dropdown icon"></i>
        <div class="default text">Select Country</div>
        <div class="menu">
        <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
        <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
        <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
        <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
        <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
        <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
        <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
        <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
        <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
        <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
        <div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
        <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
        <div class="item" data-value="au"><i class="au flag"></i>Australia</div>
        <div class="item" data-value="at"><i class="at flag"></i>Austria</div>
        <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
        <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
        <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
        <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
        <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
        <div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
        <div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
        <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
        <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
        <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
        <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
        <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
        <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
        <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
        <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
        <div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
        <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
        <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
        <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
        <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
        <div class="item" data-value="mm"><i class="mm flag"></i>Burma</div>
        <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
        <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
        <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
        <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
        <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
        <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
        <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
        <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
        <div class="item" data-value="td"><i class="td flag"></i>Chad</div>
        <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
        <div class="item" data-value="cn"><i class="cn flag"></i>China</div>
        <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
        <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
        <div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
        <div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
        <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
        <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
        <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
        <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
        <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
        <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
        <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
        <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
        <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
        <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
        <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
        <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
        <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
        <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
        <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
        <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
        <div class="item" data-value="gb"><i class="gb flag"></i>England</div>
        <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
        <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
        <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
        <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
        <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
        <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
        <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
        <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
        <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
        <div class="item" data-value="fr"><i class="fr flag"></i>France</div>
        <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
        <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
        <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
        <div class="item" data-value="de"><i class="de flag"></i>Germany</div>
        <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
        <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
        <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
        <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
        <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
        <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
        <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
        <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
        <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
        <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
        <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
        <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
        <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
        <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
        <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
        <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
        <div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
        <div class="item" data-value="in"><i class="in flag"></i>India</div>
        <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
        <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
        <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
        <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
        <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
        <div class="item" data-value="il"><i class="il flag"></i>Israel</div>
        <div class="item" data-value="it"><i class="it flag"></i>Italy</div>
        <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
        <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
        <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
        <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
        <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
        <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
        <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
        <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
        <div class="item" data-value="la"><i class="la flag"></i>Laos</div>
        <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
        <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
        <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
        <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
        <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
        <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
        <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
        <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
        <div class="item" data-value="mo"><i class="mo flag"></i>Macau</div>
        <div class="item" data-value="mk"><i class="mk flag"></i>Macedonia</div>
        <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
        <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
        <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
        <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
        <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
        <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
        <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
        <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
        <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
        <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
        <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
        <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
        <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
        <div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
        <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
        <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
        <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
        <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
        <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
        <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
        <div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
        <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
        <div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
        <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
        <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
        <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
        <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
        <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
        <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
        <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
        <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
        <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
        <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
        <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
        <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
        <div class="item" data-value="no"><i class="no flag"></i>Norway</div>
        <div class="item" data-value="om"><i class="om flag"></i>Oman</div>
        <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
        <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
        <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
        <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
        <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
        <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
        <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
        <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
        <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
        <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
        <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
        <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
        <div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
        <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
        <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
        <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
        <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
        <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
        <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
        <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
        <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
        <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
        <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
        <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
        <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
        <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
        <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
        <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
        <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
        <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
        <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
        <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
        <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
        <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
        <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
        <div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
        <div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
        <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spain</div>
        <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
        <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
        <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
        <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard</div>
        <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
        <div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
        <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
        <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
        <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
        <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
        <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
        <div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
        <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
        <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
        <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
        <div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
        <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
        <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
        <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
        <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
        <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
        <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
        <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
        <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
        <div class="item" data-value="us"><i class="us flag"></i>United States</div>
        <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
        <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
        <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
        <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
        <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
        <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
        <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
        <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
        <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
        <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
        <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
        <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
        <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
      </div>


      </div>
    </div>


    <div class="dropdown example">
      <h4 class="ui header">Search Dropdown</h4>
      <p>A dropdown can be searchable</p>
      <div class="ui floating dropdown labeled search icon button">
        <i class="world icon"></i>
        <span class="text">Select Language</span>
        <div class="menu">
          <div class="item">Arabic</div>
          <div class="item">Chinese</div>
          <div class="item">Danish</div>
          <div class="item">Dutch</div>
          <div class="item">English</div>
          <div class="item">French</div>
          <div class="item">German</div>
          <div class="item">Greek</div>
          <div class="item">Hungarian</div>
          <div class="item">Italian</div>
          <div class="item">Japanese</div>
          <div class="item">Korean</div>
          <div class="item">Lithuanian</div>
          <div class="item">Persian</div>
          <div class="item">Polish</div>
          <div class="item">Portuguese</div>
          <div class="item">Russian</div>
          <div class="item">Spanish</div>
          <div class="item">Swedish</div>
          <div class="item">Turkish</div>
          <div class="item">Vietnamese</div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Search In-Menu</h4>
      <p>A dropdown can include a search prompt inside its menu</p>
      <div class="ui floating dropdown labeled icon button">
        <i class="filter icon"></i>
        <span class="text">Filter Posts</span>
        <div class="menu">
          <div class="ui icon search input">
            <i class="search icon"></i>
            <input type="text" placeholder="Search tags...">
          </div>
          <div class="divider"></div>
          <div class="header">
            <i class="tags icon"></i>
            Tag Label
          </div>
          <div class="scrolling menu">
            <div class="item">
              <div class="ui red empty circular label"></div>
              Important
            </div>
            <div class="item">
              <div class="ui blue empty circular label"></div>
              Announcement
            </div>
            <div class="item">
              <div class="ui black empty circular label"></div>
              Cannot Fix
            </div>
            <div class="item">
              <div class="ui purple empty circular label"></div>
              News
            </div>
            <div class="item">
              <div class="ui orange empty circular label"></div>
              Enhancement
            </div>
            <div class="item">
              <div class="ui empty circular label"></div>
              Change Declined
            </div>
            <div class="item">
              <div class="ui yellow empty circular label"></div>
              Off Topic
            </div>
            <div class="item">
              <div class="ui pink empty circular label"></div>
              Interesting
            </div>
            <div class="item">
              <div class="ui green empty circular label"></div>
              Discussion
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="another dropdown example">
      <div class="ui multiple dropdown">
        <input type="hidden" name="filters">
        <i class="filter icon"></i>
        <span class="text">Filter Posts</span>
        <div class="menu">
          <div class="ui icon search input">
            <i class="search icon"></i>
            <input type="text" placeholder="Search tags...">
          </div>
          <div class="divider"></div>
          <div class="header">
            <i class="tags icon"></i>
            Tag Label
          </div>
          <div class="scrolling menu">
            <div class="item" data-value="important">
              <div class="ui red empty circular label"></div>
              Important
            </div>
            <div class="item" data-value="announcement">
              <div class="ui blue empty circular label"></div>
              Announcement
            </div>
            <div class="item" data-value="cannotfix">
              <div class="ui black empty circular label"></div>
              Cannot Fix
            </div>
            <div class="item" data-value="news">
              <div class="ui purple empty circular label"></div>
              News
            </div>
            <div class="item" data-value="enhancement">
              <div class="ui orange empty circular label"></div>
              Enhancement
            </div>
            <div class="item" data-value="off-topic">
              <div class="ui yellow empty circular label"></div>
              Off Topic
            </div>
            <div class="item" data-value="interesting">
              <div class="ui pink empty circular label"></div>
              Interesting
            </div>
            <div class="item" data-value="discussion">
              <div class="ui green empty circular label"></div>
              Discussion
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Inline</h4>
      <p>A dropdown can be formatted to appear inline in other content</p>
      <span>
        Show me posts by
        <div class="ui inline dropdown">
          <div class="text">
            <img class="ui avatar image" src="/images/avatar/small/jenny.jpg">
            Jenny Hess
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item">
              <img class="ui avatar image" src="/images/avatar/small/jenny.jpg">
              Jenny Hess
            </div>
            <div class="item">
              <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
              Elliot Fu
            </div>
            <div class="item">
              <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
              Stevie Feliciano
            </div>
            <div class="item">
              <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
              Christian
            </div>
            <div class="item">
              <img class="ui avatar image" src="/images/avatar/small/matt.jpg">
              Matt
            </div>
            <div class="item">
              <img class="ui avatar image" src="/images/avatar/small/justen.jpg">
              Justen Kitsune
            </div>
          </div>
        </div>
      </span>
    </div>

    <div class="another dropdown example">
      <h4 class="ui header">
        <i class="trophy icon"></i>
        <div class="content">
          Trending repos
          <div class="ui inline dropdown">
            <div class="text">today</div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="header">Adjust time span</div>
              <div class="active item" data-text="today">Today</div>
              <div class="item" data-text="this week">This Week</div>
              <div class="item" data-text="this month">This Month</div>
            </div>
          </div>
        </div>
      </h4>
    </div>

    <div class="hover example">
    <h4 class="ui header">Pointing</h4>
    <p>A dropdown can be formatted so that its menu is pointing</p>
      <div class="ui menu">
        <a class="item">
          Home
        </a>
        <div class="ui pointing dropdown link item">
          <span class="text">Shopping</span>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="header">Categories</div>
            <div class="item">
              <i class="dropdown icon"></i>
              <span class="text">Clothing</span>
              <div class="menu">
                <div class="header">Mens</div>
                <div class="item">Shirts</div>
                <div class="item">Pants</div>
                <div class="item">Jeans</div>
                <div class="item">Shoes</div>
                <div class="divider"></div>
                <div class="header">Womens</div>
                <div class="item">Dresses</div>
                <div class="item">Shoes</div>
                <div class="item">Bags</div>
              </div>
            </div>
            <div class="item">Home Goods</div>
            <div class="item">Bedroom</div>
            <div class="divider"></div>
            <div class="header">Order</div>
            <div class="item">Status</div>
            <div class="item">Cancellations</div>
          </div>
        </div>
        <a class="item">
          Forums
        </a>
        <a class="item">
          Contact Us
        </a>
      </div>
    </div>
    <div class="another hover example">
      <div class="ui vertical menu">
        <a class="item">
          Home
        </a>
        <div class="ui left pointing dropdown link item">
          <i class="dropdown icon"></i>
          Messages
          <div class="menu">
            <div class="item">Inbox</div>
            <div class="item">Starred</div>
            <div class="item">Sent Mail</div>
            <div class="item">Drafts (143)</div>
            <div class="divider"></div>
            <div class="item">Spam (1009)</div>
            <div class="item">Trash</div>
          </div>
        </div>
        <a class="item">
          Browse
        </a>
        <a class="item">
          Help
        </a>
      </div>
    </div>
    <div class="another button example">
      <div class="ui icon top left pointing dropdown button">
        <i class="wrench icon"></i>
        <div class="menu">
          <div class="header">Display Density</div>
          <div class="item">Comfortable</div>
          <div class="item">Cozy</div>
          <div class="item">Compact</div>
          <div class="ui divider"></div>
          <div class="item">Settings</div>
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Upload Settings</span>
            <div class="menu">
              <div class="item">
                <i class="check icon"></i>
                Convert Uploaded Files to PDF
              </div>
              <div class="item">
                <i class="check icon"></i>
                Digitize Text from Uploaded Files
              </div>
            </div>
          </div>
          <div class="item">Manage Apps</div>
          <div class="item">Keyboard Shortcuts</div>
          <div class="item">Help</div>
        </div>
      </div>
    </div>
    <div class="another button example">
      <div class="ui ignored info message">Bottom pointing dropdown menus have sub-menus open upwards</div>
      <div class="ui icon bottom left pointing dropdown button">
        <i class="wrench icon"></i>
        <div class="menu">
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">New</span>
            <div class="menu">
              <div class="item">Document</div>
              <div class="item">Image</div>
            </div>
          </div>
          <div class="item">Save As...</div>
          <div class="item">Edit</div>
        </div>
      </div>
      <div class="ui icon bottom right pointing dropdown button">
        <i class="wrench icon"></i>
        <div class="menu">
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">New</span>
            <div class="menu">
              <div class="item">Document</div>
              <div class="item">Image</div>
            </div>
          </div>
          <div class="item">Save As...</div>
          <div class="item">Edit</div>
        </div>
      </div>
    </div>
    <div class="another button example">
      <div class="ui labeled icon top right pointing dropdown button">
        <i class="filter icon"></i>
        <span class="text">Filter Posts</span>
        <div class="menu">
          <div class="ui search icon input">
            <i class="search icon"></i>
            <input type="text" name="search" placeholder="Search issues...">
          </div>
          <div class="divider"></div>
          <div class="header">
            <i class="tags icon"></i>
            Filter by tag
          </div>
          <div class="item">
            <div class="ui red empty circular label"></div>
            Important
          </div>
          <div class="item">
            <div class="ui blue empty circular label"></div>
            Announcement
          </div>
          <div class="item">
            <div class="ui black empty circular label"></div>
            Discussion
          </div>
          <div class="divider"></div>
          <div class="header">
            <i class="calendar icon"></i>
            Filter by date
          </div>
          <div class="item">
            <i class="olive circle icon"></i>
            This Week
          </div>
          <div class="item">
            <i class="violet circle icon"></i>
            This Month
          </div>
          <div class="item">
            <i class="orange circle icon"></i>
            This Year
          </div>
        </div>
      </div>
    </div>
    <div class="another button example">
      <div class="ui right pointing dropdown icon button">
        <i class="settings icon"></i>
        <div class="menu">
          <div class="ui left search icon input">
            <i class="search icon"></i>
            <input type="text" name="search" placeholder="Search issues...">
          </div>
          <div class="divider"></div>
          <div class="header">
            <i class="tags icon"></i>
            Filter by tag
          </div>
          <div class="item">
            <div class="ui red empty circular label"></div>
            Important
          </div>
          <div class="item">
            <div class="ui blue empty circular label"></div>
            Announcement
          </div>
          <div class="item">
            <div class="ui black empty circular label"></div>
            Discussion
          </div>
        </div>
      </div>
      <div class="ui left pointing dropdown icon button">
        <i class="settings icon"></i>
        <div class="menu">
          <div class="ui left search icon input">
            <i class="search icon"></i>
            <input type="text" name="search" placeholder="Search issues...">
          </div>
          <div class="header">
            <i class="tags icon"></i>
            Tag Label
          </div>
          <div class="item">
            <div class="ui red empty circular label"></div>
            Important
          </div>
          <div class="item">
            <div class="ui blue empty circular label"></div>
            Announcement
          </div>
          <div class="item">
            <div class="ui black empty circular label"></div>
            Discussion
          </div>
        </div>
      </div>
    </div>

    <div class="button example">
      <h4 class="ui header">Floating</h4>
      <p>A dropdown menu can appear to be floating below an element.</p>
      <div class="ui teal buttons">
        <div class="ui button">Save</div>
        <div class="ui floating dropdown icon button">
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i> Edit Post</div>
            <div class="item"><i class="delete icon"></i> Remove Post</div>
            <div class="item"><i class="hide icon"></i> Hide Post</div>
          </div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Simple</h4>
      <p>A simple dropdown can open without Javascript</p>
      <div class="ui compact menu">
        <div class="ui simple dropdown item">
          Dropdown
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item">Choice 1</div>
            <div class="item">Choice 2</div>
            <div class="item">Choice 3</div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Content</h2>

    <div class="dropdown example">
      <h4 class="ui header">Header</h4>
      <p>A dropdown menu can contain a header</p>
      <div class="ui floating labeled icon dropdown button">
        <i class="filter icon"></i>
        <span class="text">Filter</span>
        <div class="menu">
          <div class="header">
            <i class="tags icon"></i>
            Filter by tag
          </div>
          <div class="item">
            Important
          </div>
          <div class="item">
            Announcement
          </div>
          <div class="item">
            Discussion
          </div>
        </div>
      </div>
    </div>
    <div class="dropdown example">
      <h4 class="ui header">Divider</h4>
      <p>A dropdown menu can contain dividers to separate related content</p>
      <div class="ui floating labeled icon dropdown button">
        <i class="filter icon"></i>
        <span class="text">Filter</span>
        <div class="menu">
          <div class="header">
            <i class="tags icon"></i>
            Filter by tag
          </div>
          <div class="divider"></div>
          <div class="item">
            Important
          </div>
          <div class="item">
            Announcement
          </div>
          <div class="item">
            Discussion
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Icon</h4>
      <p>A dropdown menu can contain an <a href="/elements/icon.html">icon</a>.</p>
      <div class="ui floating labeled icon dropdown button">
        <i class="filter icon"></i>
        <span class="text">Filter</span>
        <div class="menu">
          <div class="header">
            <i class="tags icon"></i>
            Filter by tag
          </div>
          <div class="divider"></div>
          <div class="item">
            <i class="attention icon"></i>
            Important
          </div>
          <div class="item">
            <i class="comment icon"></i>
            Announcement
          </div>
          <div class="item">
            <i class="conversation icon"></i>
            Discussion
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Description</h4>
      <p>A dropdown menu can contain a description.</p>
      <div class="ui ignored info message">
        Using a description may require setting a minimum width on <code>menu</code> to prevent content overlap
      </div>
      <div class="ui floating labeled icon dropdown button">
        <i class="filter icon"></i>
        <span class="text">Filter Tags</span>
        <div class="menu">
          <div class="header">
            Filter by tag
          </div>
          <div class="divider"></div>
          <div class="item">
            <span class="description">2 new</span>
            <span class="text">Important</span>
          </div>
          <div class="item">
            <span class="description">10 new</span>
            <span class="text">Hopper</span>
          </div>
          <div class="item">
            <span class="description">5 new</span>
            <span class="text">Discussion</span>
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Label</h4>
      <p>A dropdown menu can contain a <a href="/elements/label.html">label</a>.</p>
      <div class="ui floating labeled icon dropdown button">
        <i class="filter icon"></i>
        <span class="text">Filter</span>
        <div class="menu">
          <div class="header">
            Search Issues
          </div>
          <div class="ui left icon input">
            <i class="search icon"></i>
            <input type="text" name="search" placeholder="Search...">
          </div>
          <div class="header">
            <i class="tags icon"></i>
            Filter by tag
          </div>
          <div class="item">
            <div class="ui red empty circular label"></div>
            Important
          </div>
          <div class="item">
            <div class="ui blue empty circular label"></div>
            Announcement
          </div>
          <div class="item">
            <div class="ui black empty circular label"></div>
            Discussion
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Message</h4>
      <p>A dropdown menu can contain a <a href="/collections/message.html">message</a>.</p>
      <div class="ui floating labeled icon dropdown button">
        <i class="filter icon"></i>
        <span class="text">Login</span>
        <div class="menu">
          <div class="ui error message">
            <div class="header">Error</div>
            <p>You must log-in to see all categories</p>
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Floated Content</h4>
      <p>A dropdown menu can contain floated content.</p>
      <div class="ui ignored info message">Floated content may stack to two lines without manually setting a width when or using a <code>fluid</code> dropdown
      </div>
      <div class="ui fluid selection dropdown">
        <i class="dropdown icon"></i>
        <span class="default text">Select Type</span>
        <div class="menu">
          <div class="item">
            <i class="attention right floated icon"></i>
            Important
          </div>
          <div class="item">
            <i class="comment right floated icon"></i>
            Announcement
          </div>
          <div class="item">
            <i class="conversation right floated icon"></i>
            Discussion
          </div>
        </div>
      </div>
    </div>


    <div class="dropdown example">
      <h4 class="ui header">Input</h4>
      <p>A dropdown menu can contain an <a href="/elements/input.html">input</a></p>
      <div class="ui floating labeled icon dropdown button">
        <i class="filter icon"></i>
        <span class="text">Filter</span>
        <div class="menu">
          <div class="header">
            Search Issues
          </div>
          <div class="ui left icon input">
            <i class="search icon"></i>
            <input type="text" name="search" placeholder="Search...">
          </div>
          <div class="header">
            <i class="tags icon"></i>
            Filter by tag
          </div>
          <div class="divider"></div>
          <div class="item">
            <div class="ui red empty circular label"></div>
            Important
          </div>
          <div class="item">
            <div class="ui blue empty circular label"></div>
            Announcement
          </div>
          <div class="item">
            <div class="ui black empty circular label"></div>
            Discussion
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Image</h4>
      <p>A dropdown menu can contain an <a href="/elements/image.html">image</a></p>
      <div class="ui floating labeled icon dropdown button">
        <i class="add user icon"></i>
        <span class="text">Add User</span>
        <div class="menu">
          <div class="header">
            People You Might Know
          </div>
          <div class="item">
            <img class="ui avatar image" src="/images/avatar/small/jenny.jpg">
            Jenny Hess
          </div>
          <div class="item">
            <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
            Elliot Fu
          </div>
          <div class="item">
            <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
            Stevie Feliciano
          </div>
          <div class="header">
            Your Friends' Friends
          </div>
          <div class="item">
            <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
            Christian
          </div>
          <div class="item">
            <img class="ui avatar image" src="/images/avatar/small/matt.jpg">
            Matt
          </div>
          <div class="item">
            <img class="ui avatar image" src="/images/avatar/small/justen.jpg">
            Justen Kitsune
          </div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">States</h2>

    <div class="dropdown example">
      <h4 class="ui header">Loading</h4>
      <p>A dropdown can show that it is currently loading data</p>
      <div class="ui loading dropdown">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>
    <div class="another dropdown example">
      <div class="ui loading fluid multiple search selection dropdown">
        <input type="hidden" name="country" value="kp">
        <i class="dropdown icon"></i>
        <input class="search">
        <div class="default text">Search...</div>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>
    <div class="another dropdown example">
      <div class="ui loading selection dropdown">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>
    <div class="dropdown example">
      <h4 class="ui header">Error</h4>
      <p>An errored dropdown can alert a user to a problem</p>
      <div class="ui floating dropdown error">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>
    <div class="another dropdown example">
      <div class="ui selection dropdown error">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Active</h4>
      <p>An active dropdown has its menu open</p>
      <div class="ui ignored info message">An active state will only automatically open a <code>ui simple dropdown</code>. To activate a normal dropdown use <code>$('.ui.dropdown').dropdown('show');</code></div>
      <div class="ui simple active dropdown">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Disabled</h4>
      <p>A disabled dropdown menu or item does not allow user interaction</p>
      <div class="ui disabled dropdown">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>
    <div class="another dropdown example">
      <div class="ui dropdown">
        Disabled Item <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="disabled item">Disabled</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>


    <h2 class="ui dividing header">Variations</h2>

    <div class="dropdown example">
      <h4 class="ui header">Scrolling</h4>
      <p>A dropdown can have its menu scroll</p>
      <div class="ui ignored warning message">
        Scrolling dropdowns are incompatible with the usage of <code>sub menu</code>.
      </div>
      <div class="ui scrolling dropdown">
        <input type="hidden" name="gender">
        <div class="default text">Select choice</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
          <div class="item">Choice 4</div>
          <div class="item">Choice 5</div>
          <div class="item">Choice 6</div>
          <div class="item">Choice 7</div>
          <div class="item">Choice 8</div>
          <div class="item">Choice 9</div>
          <div class="item">Choice 10</div>
          <div class="item">Choice 11</div>
          <div class="item">Choice 12</div>
          <div class="item">Choice 13</div>
          <div class="item">Choice 14</div>
          <div class="item">Choice 15</div>
        </div>
      </div>
    </div>
    <div class="another dropdown example">
      <div class="ui dropdown">
        <i class="filter icon"></i>
        <span class="text">Filter Posts</span>
        <div class="menu">
          <div class="ui icon search input">
            <i class="search icon"></i>
            <input type="text" placeholder="Search tags...">
          </div>
          <div class="divider"></div>
          <div class="header">
            <i class="tags icon"></i>
            Tag Label
          </div>
          <div class="scrolling menu">
            <div class="item">
              <div class="ui red empty circular label"></div>
              Important
            </div>
            <div class="item">
              <div class="ui blue empty circular label"></div>
              Announcement
            </div>
            <div class="item">
              <div class="ui black empty circular label"></div>
              Cannot Fix
            </div>
            <div class="item">
              <div class="ui purple empty circular label"></div>
              News
            </div>
            <div class="item">
              <div class="ui orange empty circular label"></div>
              Enhancement
            </div>
            <div class="item">
              <div class="ui empty circular label"></div>
              Change Declined
            </div>
            <div class="item">
              <div class="ui yellow empty circular label"></div>
              Off Topic
            </div>
            <div class="item">
              <div class="ui pink empty circular label"></div>
              Interesting
            </div>
            <div class="item">
              <div class="ui green empty circular label"></div>
              Discussion
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="dropdown example">
      <h4 class="ui header">Compact</h4>
      <p>A compact dropdown has no minimum width</p>
      <div class="ui compact selection dropdown">
        <i class="dropdown icon"></i>
        <div class="text">Compact</div>
        <div class="menu">
          <div class="item">A</div>
          <div class="item">B</div>
          <div class="item">C</div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Fluid</h4>
      <p>A dropdown can take the full width of its parent</p>
      <div class="ui vertical menu">
        <a class="item">Link 1</a>
        <a class="item">Link 2</a>
        <div class="header item">All Sections</div>
        <div class="ui item">
          <div class="ui fluid selection dropdown">
            <div class="text">More</div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item">Choice 1</div>
              <div class="item">Choice 2</div>
              <div class="item">Choice 3</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Menu Direction</h4>
      <p>A dropdown menu or sub-menu can specify the direction it should open</p>
      <div class="ui ignored info message">
        Specifying <code>left</code> on a menu will make all child menus open in the same direction implicitly. To have a dropdown icon appear on the left side on a child menu, you will need to use <code>left dropdown example</code>
      </div>
      <div class="ui floating labeled icon dropdown button">
        <i class="dropdown icon"></i>
        <span class="text">Menu</span>
        <div class="menu">
          <div class="item">
            <i class="left dropdown icon"></i>
            <span class="text">Left</span>
            <div class="left menu">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
            </div>
          </div>
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Right</span>
            <div class="right menu">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="another dropdown example">
      <div class="ui floating labeled icon dropdown button">
        <i class="dropdown icon"></i>
        <span class="text">Menu</span>
        <div class="left menu">
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Left</span>
            <div class="menu">
              <div class="item">
                <i class="dropdown icon"></i>
                <span class="text">Still Left</span>
                <div class="menu">
                  <div class="item">1</div>
                  <div class="item">2</div>
                  <div class="item">3</div>
                </div>
              </div>
              <div class="item">2</div>
              <div class="item">3</div>
            </div>
          </div>
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Left 2</span>
            <div class="menu">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>


  <div class="ui tab" data-tab="examples">


    <h2 class="ui header">Selection Dropdowns</h2>

    <div class="clearable example">
      <h4 class="ui header">
        Clearable
        <div class="ui teal label">
          New in 2.4.0
        </div>
      </h4>
      <p>Using the clearable setting will let users remove their selection from a dropdown.</p>

      <div class="ui fluid search selection dropdown">
        <input type="hidden" name="country">
        <div class="default text">Select Country</div>
        <i class="dropdown icon"></i>
        <div class="menu">
        <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
        <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
        <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
        <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
        <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
        <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
        <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
        <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
        <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
        <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
        <div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
        <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
        <div class="item" data-value="au"><i class="au flag"></i>Australia</div>
        <div class="item" data-value="at"><i class="at flag"></i>Austria</div>
        <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
        <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
        <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
        <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
        <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
        <div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
        <div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
        <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
        <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
        <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
        <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
        <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
        <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
        <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
        <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
        <div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
        <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
        <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
        <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
        <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
        <div class="item" data-value="mm"><i class="mm flag"></i>Burma</div>
        <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
        <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
        <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
        <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
        <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
        <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
        <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
        <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
        <div class="item" data-value="td"><i class="td flag"></i>Chad</div>
        <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
        <div class="item" data-value="cn"><i class="cn flag"></i>China</div>
        <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
        <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
        <div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
        <div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
        <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
        <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
        <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
        <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
        <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
        <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
        <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
        <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
        <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
        <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
        <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
        <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
        <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
        <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
        <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
        <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
        <div class="item" data-value="gb"><i class="gb flag"></i>England</div>
        <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
        <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
        <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
        <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
        <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
        <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
        <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
        <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
        <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
        <div class="item" data-value="fr"><i class="fr flag"></i>France</div>
        <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
        <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
        <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
        <div class="item" data-value="de"><i class="de flag"></i>Germany</div>
        <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
        <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
        <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
        <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
        <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
        <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
        <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
        <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
        <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
        <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
        <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
        <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
        <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
        <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
        <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
        <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
        <div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
        <div class="item" data-value="in"><i class="in flag"></i>India</div>
        <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
        <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
        <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
        <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
        <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
        <div class="item" data-value="il"><i class="il flag"></i>Israel</div>
        <div class="item" data-value="it"><i class="it flag"></i>Italy</div>
        <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
        <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
        <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
        <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
        <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
        <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
        <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
        <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
        <div class="item" data-value="la"><i class="la flag"></i>Laos</div>
        <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
        <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
        <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
        <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
        <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
        <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
        <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
        <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
        <div class="item" data-value="mo"><i class="mo flag"></i>Macau</div>
        <div class="item" data-value="mk"><i class="mk flag"></i>Macedonia</div>
        <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
        <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
        <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
        <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
        <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
        <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
        <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
        <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
        <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
        <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
        <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
        <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
        <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
        <div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
        <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
        <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
        <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
        <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
        <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
        <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
        <div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
        <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
        <div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
        <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
        <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
        <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
        <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
        <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
        <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
        <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
        <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
        <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
        <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
        <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
        <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
        <div class="item" data-value="no"><i class="no flag"></i>Norway</div>
        <div class="item" data-value="om"><i class="om flag"></i>Oman</div>
        <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
        <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
        <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
        <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
        <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
        <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
        <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
        <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
        <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
        <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
        <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
        <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
        <div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
        <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
        <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
        <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
        <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
        <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
        <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
        <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
        <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
        <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
        <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
        <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
        <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
        <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
        <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
        <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
        <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
        <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
        <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
        <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
        <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
        <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
        <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
        <div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
        <div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
        <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spain</div>
        <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
        <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
        <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
        <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard</div>
        <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
        <div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
        <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
        <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
        <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
        <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
        <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
        <div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
        <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
        <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
        <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
        <div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
        <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
        <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
        <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
        <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
        <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
        <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
        <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
        <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
        <div class="item" data-value="us"><i class="us flag"></i>United States</div>
        <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
        <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
        <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
        <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
        <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
        <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
        <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
        <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
        <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
        <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
        <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
        <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
        <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
      </div>

      </div>
      <div class="ui divider"></div>
      <div class="ui secondary segment">
        Show me
        <div class="ui inline scrolling dropdown">
          <input type="hidden" name="skill" value="css">
          <div class="text">css</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
<div class="item" data-value="html">HTML</div>
<div class="item" data-value="ia">Information Architecture</div>
<div class="item" data-value="javascript">Javascript</div>
<div class="item" data-value="mech">Mechanical Engineering</div>
<div class="item" data-value="meteor">Meteor</div>
<div class="item" data-value="node">NodeJS</div>
<div class="item" data-value="plumbing">Plumbing</div>
<div class="item" data-value="python">Python</div>
<div class="item" data-value="rails">Rails</div>
<div class="item" data-value="react">React</div>
<div class="item" data-value="repair">Kitchen Repair</div>
<div class="item" data-value="ruby">Ruby</div>
<div class="item" data-value="ui">UI Design</div>
<div class="item" data-value="ux">User Experience</div>
          </div>
        </div>
        classes currently available.
      </div>

      <div class="evaluated code" data-type="javascript">
        $('.clearable.example .ui.selection.dropdown')
          .dropdown({
            clearable: true
          })
        ;
        $('.clearable.example .ui.inline.dropdown')
          .dropdown({
            clearable: true,
            placeholder: 'any'
          })
        ;
      </div>
    </div>

    <div class="max example">
      <h4 class="ui header">Maximum Selections</h4>
      <p>Using <code>maxSelections</code> lets you force a maximum number of selections. You can also use <a href="/behaviors/form.html#validation-rules">form validation</a> rules to specify minimum and maximum validation settings for multi-selects inside forms.</p>

      <div class="ui sub header">Selection</div>
      <select multiple name="skills" class="ui fluid normal dropdown">
        <option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
<option value="ember">Ember</option>
<option value="html">HTML</option>
<option value="ia">Information Architecture</option>
<option value="javascript">Javascript</option>
<option value="mech">Mechanical Engineering</option>
<option value="meteor">Meteor</option>
<option value="node">NodeJS</option>
<option value="plumbing">Plumbing</option>
<option value="python">Python</option>
<option value="rails">Rails</option>
<option value="react">React</option>
<option value="repair">Kitchen Repair</option>
<option value="ruby">Ruby</option>
<option value="ui">UI Design</option>
<option value="ux">User Experience</option>
      </select>

      <div class="ui sub header">Search Selection</div>
      <div class="ui fluid multiple search normal selection dropdown">
        <input type="hidden" name="country">
        <i class="dropdown icon"></i>
        <div class="default text">Select Country</div>
        <div class="menu">
        <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
        <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
        <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
        <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
        <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
        <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
        <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
        <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
        <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
        <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
        <div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
        <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
        <div class="item" data-value="au"><i class="au flag"></i>Australia</div>
        <div class="item" data-value="at"><i class="at flag"></i>Austria</div>
        <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
        <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
        <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
        <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
        <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
        <div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
        <div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
        <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
        <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
        <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
        <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
        <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
        <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
        <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
        <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
        <div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
        <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
        <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
        <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
        <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
        <div class="item" data-value="mm"><i class="mm flag"></i>Burma</div>
        <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
        <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
        <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
        <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
        <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
        <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
        <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
        <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
        <div class="item" data-value="td"><i class="td flag"></i>Chad</div>
        <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
        <div class="item" data-value="cn"><i class="cn flag"></i>China</div>
        <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
        <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
        <div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
        <div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
        <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
        <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
        <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
        <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
        <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
        <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
        <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
        <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
        <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
        <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
        <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
        <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
        <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
        <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
        <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
        <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
        <div class="item" data-value="gb"><i class="gb flag"></i>England</div>
        <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
        <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
        <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
        <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
        <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
        <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
        <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
        <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
        <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
        <div class="item" data-value="fr"><i class="fr flag"></i>France</div>
        <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
        <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
        <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
        <div class="item" data-value="de"><i class="de flag"></i>Germany</div>
        <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
        <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
        <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
        <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
        <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
        <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
        <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
        <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
        <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
        <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
        <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
        <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
        <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
        <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
        <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
        <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
        <div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
        <div class="item" data-value="in"><i class="in flag"></i>India</div>
        <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
        <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
        <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
        <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
        <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
        <div class="item" data-value="il"><i class="il flag"></i>Israel</div>
        <div class="item" data-value="it"><i class="it flag"></i>Italy</div>
        <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
        <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
        <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
        <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
        <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
        <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
        <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
        <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
        <div class="item" data-value="la"><i class="la flag"></i>Laos</div>
        <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
        <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
        <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
        <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
        <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
        <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
        <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
        <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
        <div class="item" data-value="mo"><i class="mo flag"></i>Macau</div>
        <div class="item" data-value="mk"><i class="mk flag"></i>Macedonia</div>
        <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
        <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
        <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
        <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
        <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
        <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
        <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
        <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
        <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
        <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
        <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
        <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
        <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
        <div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
        <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
        <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
        <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
        <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
        <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
        <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
        <div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
        <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
        <div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
        <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
        <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
        <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
        <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
        <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
        <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
        <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
        <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
        <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
        <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
        <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
        <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
        <div class="item" data-value="no"><i class="no flag"></i>Norway</div>
        <div class="item" data-value="om"><i class="om flag"></i>Oman</div>
        <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
        <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
        <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
        <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
        <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
        <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
        <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
        <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
        <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
        <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
        <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
        <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
        <div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
        <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
        <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
        <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
        <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
        <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
        <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
        <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
        <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
        <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
        <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
        <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
        <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
        <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
        <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
        <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
        <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
        <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
        <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
        <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
        <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
        <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
        <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
        <div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
        <div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
        <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spain</div>
        <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
        <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
        <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
        <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard</div>
        <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
        <div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
        <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
        <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
        <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
        <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
        <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
        <div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
        <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
        <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
        <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
        <div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
        <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
        <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
        <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
        <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
        <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
        <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
        <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
        <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
        <div class="item" data-value="us"><i class="us flag"></i>United States</div>
        <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
        <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
        <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
        <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
        <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
        <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
        <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
        <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
        <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
        <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
        <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
        <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
        <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
      </div>

      </div>

      <div class="ui sub header">Without Labels</div>
      <div class="ui fluid multiple search special selection dropdown">
        <input type="hidden" name="country">
        <i class="dropdown icon"></i>
        <div class="default text">Select Country</div>
        <div class="menu">
        <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
        <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
        <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
        <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
        <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
        <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
        <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
        <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
        <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
        <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
        <div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
        <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
        <div class="item" data-value="au"><i class="au flag"></i>Australia</div>
        <div class="item" data-value="at"><i class="at flag"></i>Austria</div>
        <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
        <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
        <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
        <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
        <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
        <div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
        <div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
        <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
        <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
        <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
        <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
        <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
        <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
        <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
        <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
        <div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
        <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
        <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
        <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
        <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
        <div class="item" data-value="mm"><i class="mm flag"></i>Burma</div>
        <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
        <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
        <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
        <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
        <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
        <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
        <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
        <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
        <div class="item" data-value="td"><i class="td flag"></i>Chad</div>
        <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
        <div class="item" data-value="cn"><i class="cn flag"></i>China</div>
        <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
        <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
        <div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
        <div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
        <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
        <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
        <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
        <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
        <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
        <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
        <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
        <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
        <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
        <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
        <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
        <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
        <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
        <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
        <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
        <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
        <div class="item" data-value="gb"><i class="gb flag"></i>England</div>
        <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
        <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
        <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
        <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
        <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
        <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
        <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
        <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
        <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
        <div class="item" data-value="fr"><i class="fr flag"></i>France</div>
        <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
        <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
        <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
        <div class="item" data-value="de"><i class="de flag"></i>Germany</div>
        <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
        <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
        <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
        <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
        <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
        <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
        <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
        <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
        <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
        <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
        <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
        <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
        <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
        <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
        <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
        <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
        <div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
        <div class="item" data-value="in"><i class="in flag"></i>India</div>
        <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
        <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
        <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
        <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
        <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
        <div class="item" data-value="il"><i class="il flag"></i>Israel</div>
        <div class="item" data-value="it"><i class="it flag"></i>Italy</div>
        <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
        <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
        <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
        <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
        <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
        <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
        <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
        <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
        <div class="item" data-value="la"><i class="la flag"></i>Laos</div>
        <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
        <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
        <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
        <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
        <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
        <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
        <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
        <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
        <div class="item" data-value="mo"><i class="mo flag"></i>Macau</div>
        <div class="item" data-value="mk"><i class="mk flag"></i>Macedonia</div>
        <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
        <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
        <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
        <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
        <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
        <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
        <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
        <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
        <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
        <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
        <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
        <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
        <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
        <div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
        <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
        <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
        <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
        <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
        <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
        <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
        <div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
        <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
        <div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
        <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
        <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
        <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
        <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
        <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
        <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
        <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
        <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
        <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
        <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
        <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
        <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
        <div class="item" data-value="no"><i class="no flag"></i>Norway</div>
        <div class="item" data-value="om"><i class="om flag"></i>Oman</div>
        <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
        <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
        <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
        <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
        <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
        <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
        <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
        <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
        <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
        <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
        <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
        <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
        <div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
        <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
        <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
        <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
        <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
        <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
        <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
        <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
        <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
        <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
        <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
        <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
        <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
        <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
        <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
        <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
        <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
        <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
        <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
        <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
        <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
        <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
        <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
        <div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
        <div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
        <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spain</div>
        <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
        <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
        <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
        <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard</div>
        <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
        <div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
        <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
        <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
        <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
        <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
        <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
        <div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
        <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
        <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
        <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
        <div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
        <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
        <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
        <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
        <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
        <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
        <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
        <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
        <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
        <div class="item" data-value="us"><i class="us flag"></i>United States</div>
        <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
        <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
        <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
        <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
        <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
        <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
        <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
        <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
        <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
        <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
        <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
        <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
        <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
      </div>

      </div>

      <div class="evaluated code" data-type="javascript">
        $('.max.example .ui.normal.dropdown')
          .dropdown({
            maxSelections: 3
          })
        ;
        $('.max.example .ui.special.dropdown')
          .dropdown({
            useLabels: false,
            maxSelections: 3
          })
        ;
      </div>
    </div>

    <div class="tag example">
      <h4 class="ui header">Tagging and User Additions</h4>
      <p>Using <code>allowAdditions: true</code> gives users the ability to add their own options. This can work with either single or multiple search select dropdowns</p>

      <div class="ui ignored warning message">
        Although all dropdowns support <code>select</code> initialization, custom choices <b>will not be saved on page refresh</b> unless you use a hidden input. This is because <code>option</code> created dynamically are not preserved on page refresh.
      </div>

      <div class="ui sub header">Single</div>
      <select name="skills" class="ui fluid search dropdown">
        <option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
<option value="ember">Ember</option>
<option value="html">HTML</option>
<option value="ia">Information Architecture</option>
<option value="javascript">Javascript</option>
<option value="mech">Mechanical Engineering</option>
<option value="meteor">Meteor</option>
<option value="node">NodeJS</option>
<option value="plumbing">Plumbing</option>
<option value="python">Python</option>
<option value="rails">Rails</option>
<option value="react">React</option>
<option value="repair">Kitchen Repair</option>
<option value="ruby">Ruby</option>
<option value="ui">UI Design</option>
<option value="ux">User Experience</option>
      </select>

      <div class="ui sub header">Multiple</div>
      <div class="ui fluid multiple search selection dropdown">
        <input name="tags" type="hidden" />
        <i class="dropdown icon"></i>
        <div class="default text">Skills</div>
        <div class="menu">
          <div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
<div class="item" data-value="html">HTML</div>
<div class="item" data-value="ia">Information Architecture</div>
<div class="item" data-value="javascript">Javascript</div>
<div class="item" data-value="mech">Mechanical Engineering</div>
<div class="item" data-value="meteor">Meteor</div>
<div class="item" data-value="node">NodeJS</div>
<div class="item" data-value="plumbing">Plumbing</div>
<div class="item" data-value="python">Python</div>
<div class="item" data-value="rails">Rails</div>
<div class="item" data-value="react">React</div>
<div class="item" data-value="repair">Kitchen Repair</div>
<div class="item" data-value="ruby">Ruby</div>
<div class="item" data-value="ui">UI Design</div>
<div class="item" data-value="ux">User Experience</div>
        </div>
      </div>

      <div class="evaluated code" data-type="javascript">
        $('.tag.example .ui.dropdown')
          .dropdown({
            allowAdditions: true
          })
        ;
      </div>
    </div>

    <div class="no label example">
      <h4 class="ui header">Text Labels</h4>
      <p>Sometimes multiselect include options which are long and would appear awkwardly as labels. Setting <code>useLabels: false</code> will display a selected count, and allow reselection directly from the menu.</p>
      <div class="ui ignored info message">
        You can customize any of the messages displayed by adjusting templates in <code>settings.message</code>
      </div>
      <select multiple name="binary" class="ui fluid dropdown">
        <option value="">Select Tag</option>
        <option value="10001010">10001010</option>
        <option value="10001011">10001011</option>
        <option value="11001110">11001110</option>
        <option value="10011110">10011110</option>
      </select>

      <div class="ui horizontal divider">or</div>

      <div class="ui fluid multiple search selection dropdown">
        <input type="hidden" name="country">
        <i class="dropdown icon"></i>
        <div class="default text">Select Country</div>
        <div class="menu">
        <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
        <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
        <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
        <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
        <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
        <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
        <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
        <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
        <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
        <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
        <div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
        <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
        <div class="item" data-value="au"><i class="au flag"></i>Australia</div>
        <div class="item" data-value="at"><i class="at flag"></i>Austria</div>
        <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
        <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
        <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
        <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
        <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
        <div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
        <div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
        <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
        <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
        <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
        <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
        <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
        <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
        <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
        <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
        <div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
        <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
        <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
        <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
        <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
        <div class="item" data-value="mm"><i class="mm flag"></i>Burma</div>
        <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
        <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
        <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
        <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
        <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
        <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
        <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
        <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
        <div class="item" data-value="td"><i class="td flag"></i>Chad</div>
        <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
        <div class="item" data-value="cn"><i class="cn flag"></i>China</div>
        <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
        <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
        <div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
        <div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
        <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
        <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
        <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
        <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
        <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
        <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
        <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
        <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
        <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
        <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
        <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
        <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
        <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
        <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
        <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
        <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
        <div class="item" data-value="gb"><i class="gb flag"></i>England</div>
        <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
        <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
        <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
        <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
        <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
        <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
        <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
        <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
        <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
        <div class="item" data-value="fr"><i class="fr flag"></i>France</div>
        <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
        <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
        <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
        <div class="item" data-value="de"><i class="de flag"></i>Germany</div>
        <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
        <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
        <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
        <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
        <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
        <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
        <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
        <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
        <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
        <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
        <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
        <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
        <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
        <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
        <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
        <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
        <div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
        <div class="item" data-value="in"><i class="in flag"></i>India</div>
        <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
        <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
        <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
        <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
        <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
        <div class="item" data-value="il"><i class="il flag"></i>Israel</div>
        <div class="item" data-value="it"><i class="it flag"></i>Italy</div>
        <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
        <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
        <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
        <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
        <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
        <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
        <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
        <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
        <div class="item" data-value="la"><i class="la flag"></i>Laos</div>
        <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
        <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
        <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
        <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
        <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
        <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
        <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
        <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
        <div class="item" data-value="mo"><i class="mo flag"></i>Macau</div>
        <div class="item" data-value="mk"><i class="mk flag"></i>Macedonia</div>
        <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
        <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
        <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
        <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
        <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
        <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
        <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
        <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
        <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
        <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
        <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
        <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
        <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
        <div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
        <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
        <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
        <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
        <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
        <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
        <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
        <div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
        <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
        <div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
        <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
        <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
        <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
        <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
        <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
        <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
        <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
        <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
        <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
        <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
        <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
        <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
        <div class="item" data-value="no"><i class="no flag"></i>Norway</div>
        <div class="item" data-value="om"><i class="om flag"></i>Oman</div>
        <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
        <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
        <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
        <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
        <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
        <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
        <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
        <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
        <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
        <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
        <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
        <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
        <div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
        <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
        <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
        <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
        <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
        <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
        <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
        <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
        <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
        <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
        <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
        <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
        <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
        <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
        <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
        <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
        <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
        <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
        <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
        <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
        <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
        <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
        <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
        <div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
        <div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
        <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spain</div>
        <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
        <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
        <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
        <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard</div>
        <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
        <div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
        <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
        <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
        <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
        <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
        <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
        <div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
        <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
        <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
        <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
        <div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
        <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
        <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
        <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
        <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
        <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
        <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
        <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
        <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
        <div class="item" data-value="us"><i class="us flag"></i>United States</div>
        <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
        <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
        <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
        <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
        <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
        <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
        <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
        <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
        <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
        <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
        <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
        <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
        <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
      </div>

      </div>

      <div class="evaluated code" data-type="javascript">
        $('.no.label.example .ui.dropdown')
          .dropdown({
            useLabels: false
          })
        ;
      </div>
    </div>

    <div class="clear dropdown example">
      <h4 class="ui header">Clearing Dropdown</h4>
      <p>You can reset a form field to its placeholder value</p>
      <div class="ui multiple selection dropdown">
        <input name="gender" type="hidden" value="0,1" />
        <i class="dropdown icon"></i>
        <div class="default text">Default</div>
        <div class="menu">
            <div class="item" data-value="0">Value</div>
            <div class="item" data-value="1">Another Value</div>
        </div>
       </div>
      <div class="ui selection dropdown">
        <input name="gender" type="hidden" />
        <div class="default text">Select a value</div>
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item" data-value="0">Value</div>
            <div class="item" data-value="1">Another Value</div>
        </div>
       </div>

      <div class="ui button">
        Clear
      </div>
      <div class="evaluated code" data-type="javascript">
        $('.clear.example .button')
          .on('click', function() {
            $('.clear.example .ui.dropdown')
              .dropdown('clear')
            ;
          })
        ;
      </div>
    </div>

    <div class="restore dropdown example">
      <h4 class="ui header">Restoring Defaults</h4>
      <p>You can restore a dropdown to its value set on page load using the <code>restore defaults</code> behavior. If no default text is set on load, restore defaults will restore placeholder text</p>
      <div class="ui multiple selection dropdown">
        <input name="gender" type="hidden" value="default,default2" />
        <i class="dropdown icon"></i>
        <div class="default text">Default</div>
        <div class="menu">
            <div class="item" data-value="0">Value</div>
            <div class="item" data-value="1">Another Value</div>
            <div class="item" data-value="default">Default Value</div>
            <div class="item" data-value="default2">Second Default</div>
        </div>
      </div>
      <div class="ui divider"></div>
      <div class="ui selection dropdown">
        <input name="gender" type="hidden" value="default" />
        <i class="dropdown icon"></i>
        <div class="default text">Select a value</div>
        <div class="menu">
            <div class="item" data-value="0">Value</div>
            <div class="item" data-value="1">Another Value</div>
        </div>
       </div>
      <div class="ui divider"></div>
      <div class="ui selection dropdown">
        <input name="gender" type="hidden" value="default" />
        <i class="dropdown icon"></i>
        <div class="text">Default Value</div>
        <div class="menu">
            <div class="item" data-value="0">Value</div>
            <div class="item" data-value="1">Another Value</div>
            <div class="item" data-value="default">Default Value</div>
        </div>
       </div>
      <div class="ui divider"></div>
      <div class="ui primary button">
          Restore All Dropdowns
      </div>
      <div class="evaluated code" data-type="javascript">
        $('.restore.example .button')
          .on('click', function() {
            $('.restore.example .ui.dropdown')
              .dropdown('restore defaults')
            ;
          })
        ;
      </div>
    </div>


    <div class="upward example">
      <h4 class="ui header">Upward</h4>
      <p>A dropdown menu will automatically change which direction it opens if it can't fit on screen. If you need a dropdown to open in a specific direction you can specify it when initializing a dropdown.</p>
      <div class="code" data-demo="true">
        $('.upward.example .dropdown')
          .dropdown({
            direction: 'upward'
          })
        ;
      </div>
      <div class="ui top attached segment">
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
      <div class="ui bottom attached menu">
        <div class="ui upward dropdown item">
          <i class="settings icon"></i>
          <div class="menu">
            <div class="item">
              <i class="dropdown icon"></i>
              <span class="text">New</span>
              <div class="menu">
                <div class="item">Document</div>
                <div class="item">Image</div>
              </div>
            </div>
            <div class="item">Save As...</div>
            <div class="item">Edit</div>
          </div>
        </div>
      </div>
    </div>


    <h2 class="ui dividing header">Remote Content</h2>

    <div class="remote filter no example">
      <h4 class="ui header">Match Search Query on Server</h4>
      <p>Search selection dropdowns can specify <a href="/behaviors/api.html">API settings</a> for retrieving values remotely, this can use either a named API <code>action</code> or <code>url</code>.</p>
      <p class="ignored">Using API can allow users to select choices from large datasets that would be too large to include directly in page markups.</p>
      <p class="ignored">If your backend is not designed to return the correct markup you can use API's <code><a href="/behaviors/api.html#adjusting-server-responses">onResponse</a></code> callback to adjust the format of an API response after it is received from the server.</p>
      <p class="ignored">Requests for the same API endpoints will automatically cached locally, to avoid server roundtrips. You can disable this by adjusting the <code>cache</code> API setting.</p>
      <div class="ui ignored positive message">When a user refreshes the page, selection labels are automatically recreated by using <code>sessionStorage</code> to store the corresponding names for selected values. You can disable this feature by setting <code>saveRemoteData: false</code></div>


      <div class="ui form">
        <div class="two fields">
          <div class="field">
            <label>Favorite Animal</label>
            <div class="ui search selection dropdown">
              <input type="hidden">
              <i class="dropdown icon"></i>
              <input type="text" class="search">
              <div class="default text">Select one...</div>
            </div>
          </div>
          <div class="field">
            <label>Favorite Animals</label>
            <div class="ui multiple search selection dropdown">
              <input type="hidden">
              <i class="dropdown icon"></i>
              <input type="text" class="search">
              <div class="default text">Select...</div>
            </div>
          </div>
        </div>
      </div>

      <div class="evaluated code" data-type="javascript">
        $('.remote.filter.example .ui.dropdown')
          .dropdown({
            apiSettings: {
              // this url parses query server side and returns filtered results
              url: '//api.semantic-ui.com/tags/{query}'
            },
          })
        ;
      </div>
      <div class="code" data-type="JSON">
      // Expected server response
      {
          "success": true,
          "results": [
            {
              // name displayed in dropdown
              "name"  : "Choice 1",

              // selected value
              "value" : "value1",

              // name displayed after selection (optional)
              "text"  : "Choice 1"

              // whether field should be displayed as disabled (optional)
              "disabled"  : false

            },
            {
              "name"  : "Choice 2",
              "value" : "value2",
              "text"  : "Choice 2"
            },
            {
              "name"  : "Choice 3",
              "value" : "value3",
              "text"  : "Choice 3"
            },
            {
              "name"  : "Choice 4",
              "value" : "value4",
              "text"  : "Choice 4"
            },
            {
              "name"  : "Choice 5",
              "value" : "value5",
              "text"  : "Choice 5"
            }
          ]
      }
      </div>
    </div>

    <div class="remote choices no example">
      <h4 class="ui header">Return All Choices Remotely</h4>
      <p>When possible choicesets are large, ideally API results should only return values <b>matching the passed query term</b> to reduce transmissions over the wire. However if there are only a few hundred or less choices, you may consider returning the full set of results from an API endpoint and filtering them against the query clientside using the setting <code>filterRemoteData: true</code>.</p>
      <div class="ui form">
        <div class="three fields">
          <div class="field">
            <label>Favorite Animal</label>
            <div class="ui selection dropdown">
              <input type="hidden">
              <i class="dropdown icon"></i>
              <div class="default text">Select one...</div>
            </div>
          </div>
          <div class="field">
            <label>Favorite Animal</label>
            <div class="ui search selection dropdown">
              <input type="hidden">
              <i class="dropdown icon"></i>
              <input type="text" class="search">
              <div class="default text">Select one...</div>
            </div>
          </div>
          <div class="field">
            <label>Favorite Animals</label>
            <div class="ui multiple search selection dropdown">
              <input type="hidden">
              <i class="dropdown icon"></i>
              <input type="text" class="search">
              <div class="default text">Select...</div>
            </div>
          </div>
        </div>
      </div>

      <div class="evaluated code" data-type="javascript">
        $('.remote.choices.example .ui.dropdown')
          .dropdown({
            apiSettings: {
              // this url just returns a list of tags (with API response expected above)
              url: '//api.semantic-ui.com/tags/'
            },
            filterRemoteData: true
          })
        ;
      </div>
    </div>

    <h2 class="ui header">Menus</h2>

    <div class="transition example">
      <h4 class="ui header">Changing Transitions</h4>
      <p>A dropdown can specify a different <a href="/modules/transition.html">transition</a>.</p>

      <div class="code" data-type="javascript">
      $('.dropdown')
        .dropdown({
          // you can use any ui transition
          transition: 'drop'
        })
      ;
      </div>

      <div class="ui teal buttons">
        <div class="ui button">Toggle</div>
        <div class="ui floating dropdown icon button">
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-value="drop">Drop</div>
            <div class="item" data-value="horizontal flip">Horizontal Flip</div>
            <div class="item" data-value="fade up">Fade Up</div>
            <div class="item" data-value="scale">Scale</div>
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Multiple Levels</h4>
      <p>A dropdown menu can also contain sub menus inside of it</p>
      My favorite animal breed is
      <div class="ui inline dropdown">
        <input type="hidden" name="gender">
        <div class="text">Shiba Inu</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Dogs</span>
            <div class="menu">
              <div class="item">Shiba Inu</div>
              <div class="item">
                <i class="dropdown icon"></i>
                <span class="text">Poodle</span>
                <div class="menu">
                  <div class="item">Toy</div>
                  <div class="item">Standard</div>
                </div>
              </div>
              <div class="item">Labrador</div>
            </div>
          </div>
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Cats</span>
            <div class="menu">
              <div class="item">Aegean</div>
              <div class="item">Balinese</div>
              <div class="item">Persian</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="category example">
      <h4 class="ui header">Category Selection</h4>
      <p>Using a multi-level menu with <code>allowCategorySelection: true</code> will allow items with sub-menus to be selected.</p>
      <div class="ui ignored code" data-type="javascript">
        $('.category.example .ui.dropdown')
          .dropdown({
            allowCategorySelection: true
          })
        ;
      </div>
      <div class="ui dropdown button">
        <span class="text">Choose Category</span>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">
            <span class="text">Category 1</span>
          </div>
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Category 2</span>
            <div class="menu">
              <div class="item">Item 2A</div>
              <div class="item">Item 2B</div>
              <div class="item">Item 2C</div>
            </div>
          </div>
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Category 3</span>
            <div class="menu">
              <div class="item">Item 3A</div>
              <div class="item">Item 3B</div>
              <div class="item">Item 3C</div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="dropdown example">
      <h4 class="ui header">Preserving User Selections</h4>
      <p>This example uses a preset text value to preserve the menu item on page navigation</p>
      <div class="ui ignored info icon message">
        <i class="help circle icon"></i>
        <div class="content">
          <p>A dropdown will automatically select on page load any menu item that includes the current value of <code>text</code> or your dropdown's <code>hidden input</code> value.</p>
          <p>This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.</p>
        </div>
      </div>


      Current action: <div class="ui inline dropdown">
        <div class="text">Hide</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Edit</div>
          <div class="item">Remove</div>
          <div class="item">Hide</div>
        </div>
      </div>

    </div>


    <h2 class="ui header">Adjusting Actions</h2>

    <div class="button example">
      <h4 class="ui header">Combo Dropdowns</h4>
      <div class="ignored">
        <p>A <a href="/elements/button.html">button</a> can be formatted with a dropdown.</p>
        <p>Using the <code>combo</code> action will change the preceding element to the selected value.</p>
      </div>
      <div class="evaluated code" data-type="javascript">
      $('.combo.dropdown')
        .dropdown({
          action: 'combo'
        })
      ;
      </div>

      <div class="ui teal buttons">
        <div class="ui button">Save</div>
        <div class="ui combo top right pointing dropdown icon button">
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i> Edit</div>
            <div class="item"><i class="delete icon"></i> Delete</div>
            <div class="item"><i class="hide icon"></i> Hide</div>
          </div>
        </div>
      </div>
    </div>

    <div class="link example">
      <h4 class="ui header">Link Dropdowns</h4>
      <div class="ignored">
        <p>Dropdowns support different default actions that can occur when an item is selected. For example, you can set your dropdown not to change its text, or select a value from its menu.</p>
        <div class="evaluated code" data-type="javascript">
        $('.link.example .dropdown')
          .dropdown({
            action: 'hide'
          })
        ;
        </div>
      </div>
      <div class="ui hidden divider"></div>
      <div class="ui floating dropdown button">
        <div class="text">Go to</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item" href="#link1"><i class="home icon"></i> Home</a>
          <a class="item" href="#link2"><i class="users icon"></i> Browse</a>
          <a class="item" href="#link3"><i class="search icon"></i> Search</a>
        </div>
      </div>
    </div>

    <h2 class="ui header">Coupling</h2>

    <div class="dropdown example">
    <h4 class="ui header">Button Group</h4>
      <p>A <a href="/elements/button.html">button group</a> can be formatted to show additional content as a dropdown</p>
      <div class="ui icon buttons">
        <div class="ui top left pointing dropdown button">
          <i class="user icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i>Edit User</div>
            <div class="item"><i class="delete icon"></i>Remove User</div>
            <div class="item"><i class="hide icon"></i>Make Invisible</div>
          </div>
        </div>
        <div class="ui top left pointing dropdown button">
          <i class="users icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i>Edit Group</div>
            <div class="item"><i class="delete icon"></i>Remove Group</div>
            <div class="item"><i class="hide icon"></i>Hide from Group</div>
          </div>
        </div>
        <div class="ui top right pointing dropdown button">
          <i class="settings icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i> Edit</div>
            <div class="item"><i class="delete icon"></i> Remove</div>
            <div class="item"><i class="hide icon"></i> Hide</div>
          </div>
        </div>
      </div>
    </div>

    <div class="hover example">
      <h4 class="ui header">Menu</h4>
      <p>A <a href="/collections/menu.html">menu</a> element can contain a dropdown</p>
        <div class="ui menu">
          <a class="item">
            Home
          </a>
          <a class="ui dropdown item">
            Messages
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item">
                <i class="dropdown icon"></i>
                <span class="text">Categories</span>
                <div class="menu">
                  <div class="item">Unread</div>
                  <div class="item">Promotions</div>
                  <div class="item">Updates</div>
                </div>
              </div>
              <div class="item">Archive</div>
            </div>
          </a>
          <a class="item">
            Browse
          </a>
        </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Form</h4>
      <p>A dropdown can be formatted to allow selection inside a <a href="/collections/form.html">form</a></p>
      <div class="ui form segment">
        <div class="two fields">
          <div class="field">
            <label>First Name</label>
            <input placeholder="First Name" type="text">
          </div>
          <div class="field">
            <label>Last Name</label>
            <input placeholder="Last Name" type="text">
          </div>
        </div>
        <div class="field">
          <label>Gender</label>
          <div class="ui dropdown selection">
            <input type="hidden" name="gender">
            <div class="default text">Select Gender</div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item" data-value="male">Male</div>
              <div class="item" data-value="female">Female</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">
    <h2 class="ui dividing header">Initializing</h2>

    <div class="no example">
      <h4 class="ui header">Initializing Existing HTML</h4>
      <p>Initializing a dropdown with pre-existing HTML allows for greater performance than initializing a dropdown directly on a <code>select</code> element.</p>
      <div class="ui ignored info message">Any select element initialized as dropdown will also be hidden until Javascript can create HTML, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow.</div>
      <div class="code" data-label="HTML" data-type="html">
        <div class="ui dropdown">
          <input type="hidden" name="gender">
          <i class="dropdown icon"></i>
          <div class="default text">Gender</div>
          <div class="menu">
            <div class="item" data-value="male">Male</div>
            <div class="item" data-value="female">Female</div>
          </div>
        </div>
      </div>
      <div class="code" data-label="Javascript" data-type="javascript">
        $('.ui.dropdown')
          .dropdown()
        ;
      </div>
    </div>
    <div class="js example">
      <h4 class="ui header">
        Initializing with Javascript Only
        <div class="ui teal label">New in 2.2.12</div>
      </h4>
      <p>You can specify a list of values in the settings object to avoid having to stub the html yourself.</p>
      <p>Adding <code>selected: true</code> to an item will have that item selected by default.</p>
      <p>You can also use the <code>placeholder</code> setting to specify placeholder text before an option is selected.</p>
      <div class="code" data-label="HTML" data-type="html">
        <div class="ui dropdown">
          <div class="text"></div>
          <i class="dropdown icon"></i>
        </div>
      </div>
      <div class="code" data-label="Javascript" data-type="javascript">
        $('.ui.dropdown')
          .dropdown({
            values: [
              {
                name: 'Male',
                value: 'male'
              },
              {
                name     : 'Female',
                value    : 'female',
                selected : true
              }
            ]
          })
        ;
      </div>
    </div>
    <div class="no dropdown example">
      <h4 class="ui header">Specifying Different Text &amp; Hidden Input Values</h4>
      <p>You can specify different values for selected text, and selected form values by adding <code>data-text</code> or <code>data-value</code> to any item. This is useful if you include additional data, like icons, that you want to appear only inside the dropdown menu.</p>
      <div class="ui ignored info message">If you don't specify a value (either in the `select` or via a `data-value` property, then the input value will be set to the lowercased text in the element.</div>

      <div class="code" data-label="HTML" data-type="html">
        <div class="ui selection dropdown">
          <input type="hidden" name="gender">
          <i class="dropdown icon"></i>
          <div class="default text">Gender</div>
          <div class="menu">
            <div class="item" data-value="male" data-text="Male">
              <i class="male icon"></i>
              Male
            </div>
            <div class="item" data-value="female" data-text="Female">
              <i class="female icon"></i>
              Female
            </div>
          </div>
        </div>
      </div>
      <div class="ui selection dropdown">
        <input type="hidden" name="gender">
        <i class="dropdown icon"></i>
        <div class="default text">Gender</div>
        <div class="menu">
          <div class="item" data-value="male" data-text="Male">
            <i class="male icon"></i>
            Male
          </div>
          <div class="item" data-value="female" data-text="Female">
            <i class="female icon"></i>
            Female
          </div>
        </div>
      </div>
    </div>
    <div class="no example">
      <h4 class="ui header">Converting Form Elements</h4>
      <p>For convenience, <code>select</code> elements can automatically be converted to <code>selection dropdown</code>. A select options with blank string values will be converted to prompt text.</p>
      <div class="code" data-label="HTML" data-type="html">
        <select name="gender" class="ui dropdown" id="select">
          <option value="">Gender</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </div>
      <div class="code" data-type="javascript" data-demo="true">
        $('#select')
          .dropdown()
        ;
      </div>
      <select class="ui dropdown" name="gender" id="select">
        <option value="">Gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>
    <div class="no example">
      <h4 class="ui header">Hybrid Form Initialization</h4>
      <p>As a third option, you can include a wrapper around your <code>select</code> so that it will appear correctly on page load, but will then <b>populate the hidden menu</b> when Javascript fires. In this case, the <code>select</code> element does not receive the <code>ui dropdown</code> class.</p>
      <div class="code" data-label="HTML" data-type="html">
        <div class="ui vertical menu" id="hybrid">
          <div class="ui dropdown item">
            <i class="dropdown icon"></i>
            Colors
            <select>
              <option>Red</option>
              <option>Black</option>
              <option>Blue</option>
              <option>Green</option>
            </select>
          </div>
          <div class="ui dropdown item">
            <i class="dropdown icon"></i>
            Sizes
            <select>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
              <option>Huge</option>
            </select>
          </div>
        </div>
      </div>
      <div class="code" data-type="javascript" data-demo="true">
        $('#hybrid select')
          .dropdown({
            on: 'hover'
          })
        ;
      </div>
      <div class="ui vertical menu" id="hybrid">
          <div class="ui dropdown item">
            <i class="dropdown icon"></i>
            Colors
            <select>
              <option>Red</option>
              <option>Black</option>
              <option>Blue</option>
              <option>Green</option>
            </select>
          </div>
          <div class="ui dropdown item">
            <i class="dropdown icon"></i>
            Sizes
            <select>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
              <option>Huge</option>
            </select>
          </div>
        </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Searching Dropdowns</h4>
      <p>Using a <code>search selection dropdown</code> will allow you users to search more easily through large lists. This can also be converted directly from a form select element.</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#search-select')
          .dropdown()
        ;
      </div>
      <select class="ui search selection dropdown" id="search-select">
        <option value="">State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
      <div class="ui ignored hidden divider"></div>
      <div class="code" data-label="HTML" data-type="html">
        <select class="ui search selection dropdown" id="search-select">
          <option value="">State</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <!-- Saving your scroll sanity !-->
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
    </div>
    <div class="no example">
      <h4 class="ui header">Multiple Selections</h4>
      <p>You can allow multiple selections by the <code>multiple</code> property on a <code>select</code> element, or by including the class <code>multiple</code> on a dropdown.</p>
      <p>When pre-existing HTML with a hidden input is used, values will be passed through a single value separated by a delimiter. The default is "," but this can be changed by adjusting the <code>delimiter</code> setting.</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#multi-select')
          .dropdown()
        ;
      </div>

      <select class="ui search selection dropdown" multiple id="multi-select">
        <option value="">State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>

      <div class="ui ignored hidden divider"></div>

      <h5 class="ui sub header">Dropdown</h5>
      <div class="code" data-label="HTML" data-type="html">
        <div class="ui multiple selection dropdown">
          <!-- This will receive comma separated value like OH,TX,WY !-->
          <input name="states" type="hidden" />
          <i class="dropdown icon"></i>
          <div class="default text">States</div>
          <div class="menu">
            <div class="item" data-value="AL">Alabama</div>
            <div class="item" data-value="AK">Alaska</div>
            <div class="item" data-value="AZ">Arizona</div>
            <div class="item" data-value="AR">Arkansas</div>
            <div class="item" data-value="CA">California</div>
            <!-- Saving your scroll sanity !-->
            <div class="item" data-value="OH">Ohio</div>
            <div class="item" data-value="OK">Oklahoma</div>
            <div class="item" data-value="OR">Oregon</div>
            <div class="item" data-value="PA">Pennsylvania</div>
            <div class="item" data-value="RI">Rhode Island</div>
            <div class="item" data-value="SC">South Carolina</div>
            <div class="item" data-value="SD">South Dakota</div>
            <div class="item" data-value="TN">Tennessee</div>
            <div class="item" data-value="TX">Texas</div>
            <div class="item" data-value="UT">Utah</div>
            <div class="item" data-value="VT">Vermont</div>
            <div class="item" data-value="VA">Virginia</div>
            <div class="item" data-value="WA">Washington</div>
            <div class="item" data-value="WV">West Virginia</div>
            <div class="item" data-value="WI">Wisconsin</div>
            <div class="item" data-value="WY">Wyoming</div>
          </div>
        </div>
      </div>

      <h5 class="ui sub header">Select</h5>
      <div class="code" data-label="HTML" data-type="html">
        <select name="states" class="ui selection dropdown" multiple id="multi-select">
          <option value="">States</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
    </div>


    <div class="no example">
      <h4 class="ui header">Specifying Select Action</h4>
      <p>Dropdowns have multiple built-in actions that can occur on item selection. You can specify a built-in action by passing its name to <code>settings.action</code> or pass a custom function that performs an action.</p>

      <table class="ui definition sortable celled table segment">
        <thead>
          <tr>
            <th>Action</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>activate (Default)</td>
            <td>Selects current item, adjusts dropdown value and changes dropdown text</td>
          </tr>
          <tr>
            <td>combo</td>
            <td>Same as activate, but updates previous elements text instead of self</td>
          </tr>
          <tr>
            <td>select</td>
            <td>Selects current item from menu and stores value, but does not change dropdown text</td>
          </tr>
          <tr>
            <td>hide</td>
            <td>Hides the dropdown menu and stores value, but does not change text</td>
          </tr>
          <tr>
            <td>function(text, value){}</td>
            <td>Custom action</td>
          </tr>
          <tr>
            <td>nothing</td>
            <td>Does nothing</td>
          </tr>
        </tbody>
      </table>

      <p>To specify a different built in action, simply specify the name.</p>
      <div class="code" data-type="javascript" data-label="Specified Action">
        $('.dropdown')
          .dropdown({
            action: 'combo'
          })
        ;
      </div>
      <p>To trigger <b>only your custom action</b> and no default action, specify your own function for <code>settings.action</code>.</p>
      <div class="code" data-type="javascript" data-label="Custom Action">
        $('.dropdown')
          .dropdown({
            action: function(text, value) {
              // nothing built in occurs
            }
          })
        ;
      </div>

      <p>If you want to have both a built in action occur, and your own custom action use <code>onChange</code> in combination with <code>action</code></p>

      <div class="code" data-type="javascript" data-label="Custom Action">
        $('.dropdown')
          .dropdown({
            action: 'hide',
            onChange: function(value, text, $selectedItem) {
              // custom action
            }
          })
        ;
      </div>


    </div>



    <h2 class="ui dividing header">Behavior</h2>

    <p>All the following behaviors can be called using the syntax:</p>
    <div class="code">
    $('.your.element')
      .dropdown('behavior name', argumentOne, argumentTwo)
    ;
    </div>

    <table class="ui definition sortable celled table segment">
      <thead>
        <tr>
          <th>Behavior</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>setup menu(values)</td>
          <td>Recreates dropdown menu from passed values. <code>values</code> should be an object with the following structure: <code>{ values: [ {value, text, name} ] }</code>.</td>
        </tr>
          <td>change values (values)</td>
          <td>Changes dropdown to use new values</td>
        </tr>
        <tr>
          <td>refresh</td>
          <td>Refreshes all cached selectors and data</td>
        </tr>
        <tr>
          <td>toggle</td>
          <td>Toggles current visibility of dropdown</td>
        </tr>
        <tr>
          <td>show</td>
          <td>Shows dropdown</td>
        </tr>
        <tr>
          <td>hide</td>
          <td>Hides dropdown</td>
        </tr>
        <tr>
          <td>clear</td>
          <td>Clears dropdown of selection</td>
        </tr>
        <tr>
          <td>hide others</td>
          <td>Hides all other dropdowns that is not current dropdown</td>
        </tr>
        <tr>
          <td>restore defaults</td>
          <td>Restores dropdown text and value to its value on page load</td>
        </tr>
        <tr>
          <td>restore default text</td>
          <td>Restores dropdown text to its value on page load</td>
        </tr>
        <tr>
          <td>restore placeholder text</td>
          <td>Restores dropdown text to its prompt, placeholder text</td>
        </tr>
        <tr>
          <td>restore default value</td>
          <td>Restores dropdown value to its value on page load</td>
        </tr>
        <tr>
          <td>save defaults</td>
          <td>Saves current text and value as new defaults (for use with restore)</td>
        </tr>
        <tr>
          <td>set selected(value)</td>
          <td>Sets value as selected</td>
        </tr>
        <tr>
          <td>remove selected(value)</td>
          <td>Remove value from selected</td>
        </tr>
        <tr>
          <td>set selected([value1, value2])</td>
          <td>Adds a group of values as selected</td>
        </tr>
        <tr>
          <td>set exactly([value1, value2])</td>
          <td>Sets selected values to exactly specified values, removing current selection</td>
        </tr>
        <tr>
          <td>set text(text)</td>
          <td>Sets dropdown text to a value</td>
        </tr>
        <tr>
          <td>set value(value)</td>
          <td>Sets dropdown input to value (does not update display state)</td>
        </tr>
        <tr>
          <td>get text</td>
          <td>Returns current dropdown text</td>
        </tr>
        <tr>
          <td>get value</td>
          <td>Returns current dropdown input value</td>
        </tr>
        <tr>
          <td>get item(value)</td>
          <td>Returns DOM element that matches a given input value</td>
        </tr>
        <tr>
          <td>bind touch events</td>
          <td>Adds touch events to element</td>
        </tr>
        <tr>
          <td>bind mouse events</td>
          <td>Adds mouse events to element</td>
        </tr>
        <tr>
          <td>bind intent</td>
          <td>Binds a click to document to determine if you click away from a dropdown</td>
        </tr>
        <tr>
          <td>unbind intent</td>
          <td>Unbinds document intent click</td>
        </tr>
        <tr>
        <td>determine intent</td>
          <td>Returns whether event occurred inside dropdown</td>
        </tr>
        <tr>
          <td>determine select action(text, value)</td>
          <td>Triggers preset item selection action based on settings passing text/value</td>
        </tr>
        <tr>
          <td>set active</td>
          <td>Sets dropdown to active state
        <tr>
          <td>set visible</td>
          <td>Sets dropdown to visible state</td>
        </tr>
        <tr>
          <td>remove active</td>
          <td>Removes dropdown active state
        <tr>
          <td>remove visible</td>
          <td>Removes dropdown visible state</td>
        </tr>
        <tr>
          <td>is selection</td>
          <td>Returns whether dropdown is a selection dropdown</td>
        </tr>
        <tr>
          <td>is animated</td>
          <td>Returns whether dropdown is animated</td>
        </tr>
        <tr>
          <td>is visible</td>
          <td>Returns whether dropdown is visible</td>
        </tr>
        <tr>
          <td>is hidden</td>
          <td>Returns whether dropdown is hidden</td>
        </tr>
        <tr>
          <td>get default text</td>
          <td>Returns dropdown value as set on page load</td>
        </tr>
        <tr>
          <td>get placeholder text</td>
          <td>Returns placeholder text</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="ui tab" data-tab="settings">

    <h2 class="ui dividing header">
      Dropdown
    </h2>

    <div class="no example">

    <h4 class="ui header">
      Frequently Used Settings
    </h4>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>values</td>
          <td>false</td>
          <td>When specified allows you to initialize dropdown with specific values. See usage guide for details.</td>
        </tr>
        <tr>
          <td>on</td>
          <td>click</td>
          <td>Event used to trigger dropdown (Hover, Click, Custom Event)</td>
        </tr>
        <tr>
          <td>clearable</td>
          <td>false</td>
          <td>Whether the dropdown value can be cleared by the user after being selected. </td>
        </tr>
        <tr>
          <td>ignoreCase</td>
          <td>false<div class="ui label">New in 2.2.13</div></td>
          <td>Whether values with matching cases should be treated as identical when adding them to a dropdown.</td>
        </tr>
        <tr>
          <td>allowReselection</td>
          <td>false</td>
          <td>When set to <code>true</code> will fire <code>onChange</code> even when the value a user select matches the currently selected value.</td>
        </tr>
        <tr>
          <td>allowAdditions</td>
          <td>false</td>
          <td>Whether search selection should allow users to add their own selections, works for single or multiselect.</td>
        </tr>
        <tr>
          <td>hideAdditions</td>
          <td>true</td>
          <td>If disabled user additions will appear in the dropdown's menu using a specially formatted selection item formatted by <code>templates.addition</code>.</td>
        </tr>
        <tr>
          <td>action</td>
          <td>auto</td>
          <td>
          <p>Sets a default action to occur. (See usage guide)</p>
          <div class="ui vertical divided list">
            <div class="item">
              <div class="header">activate (default)</div>
              <div class="description">Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available</div>
            </div>
            <div class="item">
              <div class="header">select</div>
              <div class="description">activates menu and updates input fields, but does not change current text</div>
            </div>
            <div class="item">
              <div class="header">combo</div>
              <div class="description">changes text of previous sibling element</div>
            </div>
            <div class="item">
              <div class="header">nothing</div>
              <div class="description">no action occurs</div>
            </div>
            <div class="item">
              <div class="header">hide</div>
              <div class="description">Dropdown menu is hidden</div>
            </div>
            <div class="item">
              <div class="header">function(text, value, element){}</div>
              <div class="description">custom function is executed with values specified in callback</div>
            </div>
          </div>
        </tr>
        <tr>
          <td>minCharacters</td>
          <td>1</td>
          <td>The minimum characters for a search to begin showing results</td>
        </tr>
        <tr>
          <td>match</td>
          <td>both</td>
          <td>When using <code>search selection</code> specifies how to match values.
          <div class="ui vertical divided list">
            <div class="item">
              <div class="header">both</div>
              <div class="description">Matches against text and value</div>
            </div>
            <div class="item">
              <div class="header">value</div>
              <div class="description">matches against value only</div>
            </div>
            <div class="item">
              <div class="header">text</div>
              <div class="description">matches against text only</div>
            </div>
          </div>
        </tr>
        <tr>
          <td>selectOnKeydown</td>
          <td>true</td>
          <td>Whether dropdown should select new option when using keyboard shortcuts. Setting to <code>false</code> will require <code>enter</code> or left click to confirm a choice.</td>
        </tr>
        <tr>
          <td>forceSelection</td>
          <td>true</td>
          <td>Whether search selection will force currently selected choice when element is blurred.</td>
        </tr>
        <tr>
          <td>allowCategorySelection</td>
          <td>false</td>
          <td>Whether menu items with sub-menus (categories) should be selectable</td>
        </tr>
        <tr>
          <td>placeholder</td>
          <td>auto</td>
          <td>
            <div class="ui vertical divided list">
              <div class="item">
                <div class="header">auto</div>
                <div class="description">Convert option with "" (blank string) value to placeholder text</div>
              </div>
              <div class="item">
                <div class="header">value</div>
                <div class="description">Sets string value to placeholder text, leaves "" value</div>
              </div>
              <div class="item">
                <div class="header">false</div>
                <div class="description">Leaves "" value as a selectable option</div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    </div>

    <div class="no example">

    <h4 class="ui header">
      Remote Settings
    </h4>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>apiSettings</td>
          <td>false</td>
          <td>Can be set to an object to specify <a href="/behaviors/api.html">API settings</a> for retrieving remote selection menu content from an API endpoint</td>
        </tr>
        <tr>
          <td>fields</td>
          <td>
            <div class="code" data-type="css">
            fields: {
              remoteValues : 'results', // grouping for api results
              values       : 'values', // grouping for all dropdown values
              name         : 'name',   // displayed dropdown text
              value        : 'value'   // actual dropdown value
            }
            </div>
          </td>
          <td>List mapping dropdown content to JSON Property when using API</td>
        </tr>
        <tr>
          <td>filterRemoteData</td>
          <td>false</td>
          <td>Whether results returned from API should be filtered by query before being displayed</td>
        </tr>
        <tr>
          <td>saveRemoteData</td>
          <td>true</td>
          <td>When enabled, will automatically store selected name/value pairs in <code>sessionStorage</code> to preserve user selection on page refresh. Disabling will clear remote dropdown values on refresh.</td>
        </tr>
      </tbody>
    </table>
    </div>

    <div class="no example">

    <h4 class="ui header">
      Multiple Select Settings
    </h4>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="eight wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>useLabels</td>
          <td>
           true
          </td>
          <td>Whether multiselect should use labels. Must be set to true when <code>allowAdditions</code> is <code>true</code></td>
        </tr>
        <tr>
          <td>maxSelections</td>
          <td>
           false
          </td>
          <td>When set to a number, sets the maximum number of selections</td>
        </tr>
        <tr>
          <td>glyphWidth</td>
          <td>
           1.0714
          </td>
          <td>Maximum glyph width, used to calculate search size. This is usually size of a "W" in your font in <code>em</code></td>
        </tr>
        <tr>
          <td>label</td>
          <td>
            <div class="code">
            label: {
              transition : 'horizontal flip',
              duration   : 200,
              variation  : false
            }
            </div>
          </td>
          <td>Allows customization of multi-select labels</td>
        </tr>
      </tbody>
    </table>
    </div>

    <div class="no example">
    <h4 class="ui header">
      Additional Settings
    </h4>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>direction</td>
          <td>'auto'</td>
          <td>When set to <code>auto</code> determines direction based on whether dropdown can fit on screen. Set to <code>upward</code> or <code>downward</code> to always force a direction.</td>
        </tr>
        <tr>
          <td>keepOnScreen</td>
          <td>true</td>
          <td>Whether dropdown should try to keep itself on screen by checking whether menus display position in its <code>context</code> (Default context is page).</td>
        </tr>
        <tr>
          <td>context</td>
          <td>window</td>
          <td>Element context to use when checking whether can show when <code>keepOnScreen: true</code></td>
        </tr>
        <tr>
          <td>fullTextSearch</td>
          <td>false</td>
          <td>Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to "false" will only match start of string.</td>
        </tr>
        <tr>
          <td>preserveHTML</td>
          <td>true</td>
          <td>Whether HTML included in dropdown values should be preserved. (Allows icons to show up in selected value)</td>
        </tr>
        <tr>
          <td>sortSelect</td>
          <td>false</td>
          <td>Whether to sort values when creating a dropdown automatically from a select element.</td>
        </tr>
        <tr>
          <td>showOnFocus</td>
          <td>true</td>
          <td>Whether to show dropdown menu automatically on element focus.</td>
        </tr>
        <tr>
          <td>allowTab</td>
          <td>true</td>
          <td>Whether to allow the element to be navigable by keyboard, by automatically creating a <code>tabindex</code></td>
        </tr>
        <tr>
          <td>transition</td>
          <td>
            auto (slide down / slide up)
          </td>
          <td>Named transition to use when animating menu in and out. Defaults to <code>slide down</code> or <code>slide up</code> depending on dropdown direction. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
        </tr>
        <tr>
          <td>duration</td>
          <td>
            200
          </td>
          <td>Duration of animation events</td>
        </tr>
        <tr>
          <td>keys</td>
          <td>
          <div class="code">
          keys : {
            backspace  : 8,
            delimiter  : 188, // comma
            deleteKey  : 46,
            enter      : 13,
            escape     : 27,
            pageUp     : 33,
            pageDown   : 34,
            leftArrow  : 37,
            upArrow    : 38,
            rightArrow : 39,
            downArrow  : 40
          }
          </div>
          </td>
          <td>
            The <code>keycode</code> used to represent keyboard shortcuts. To avoid issues with some foreign languages, you can pass <code>false</code> for comma delimiter's value
          </td>
        </tr>
        <tr>
          <td>delay</td>
          <td>
          <div class="code">
          delay : {
            hide   : 300,
            show   : 200,
            search : 50,
            touch  : 50
          }
          </div>
          </td>
          <td>Time in milliseconds to debounce show or hide behavior when <code>on: hover</code> is used, or when touch is used.</td>
        </tr>
      </tbody>
    </table>

    </div>

    <h4 class="ui header">
      Callbacks
    </h4>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th class="six wide"></th>
          <th>Context</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onChange(value, text, $choice)</td>
          <td>Dropdown</td>
          <td>Is called after a dropdown value changes. Receives the name and value of selection and the active menu element</td>
        </tr>
        <tr>
          <td>onAdd(addedValue, addedText, $addedChoice)</td>
          <td>Dropdown</td>
          <td>Is called after a dropdown selection is added using a multiple select dropdown, only receives the added value</td>
        </tr>
        <tr>
          <td>onRemove(removedValue, removedText, $removedChoice)</td>
          <td>Dropdown</td>
          <td>Is called after a dropdown selection is removed using a multiple select dropdown, only receives the removed value</td>
        </tr>
        <tr>
          <td>onLabelCreate(value, text)</td>
          <td>$label (jQDOM)</td>
          <td>Allows you to modify a label before it is added. Expects the jQ DOM element for a label to be returned.</td>
        </tr>
        <tr>
          <td>onLabelRemove(value)</td>
          <td>$label (jqDOM)</td>
          <td>Called when a label is remove, <code>return false;</code> will prevent the label from being removed.</td>
        </tr>
        <tr>
          <td>onLabelSelect($selectedLabels)</td>
          <td>Dropdown</td>
          <td>Is called after a label is selected by a user</td>
        </tr>
        <tr>
          <td>onNoResults(searchValue)</td>
          <td>Dropdown</td>
          <td>Is called after a dropdown is searched with no matching values</td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>Dropdown</td>
          <td>Is called before a dropdown is shown. If <code>false</code> is returned, dropdown will not be shown.</td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>Dropdown</td>
          <td>Is called before a dropdown is hidden. If <code>false</code> is returned, dropdown will not be hidden.</td>
        </tr>
      </tbody>
    </table>

    <h4 class="ui header">
      Module Settings
    </h4>

    <h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th></th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>dropdown</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>message</td>
          <td colspan="2">
            <p>
              You can specify site wide messages by modifying <code>$.fn.dropdown.settings.message</code>
              that will apply on any dropdown if it appears in the page.
            </p>
            <div class="code">
            message: {
              addResult     : 'Add <b>{term}</b>',
              count         : '{count} selected',
              maxSelections : 'Max {maxCount} selections',
              noResults     : 'No results found.'
            }
            </div>
          </td>
        </tr>
        <tr>
          <td>selector</td>
          <td colspan="2">
            <div class="code" data-type="html">
            selector : {
              addition     : '.addition',
              dropdown     : '.ui.dropdown',
              icon         : '> .dropdown.icon',
              input        : '> input[type="hidden"], > select',
              item         : '.item',
              label        : '> .label',
              remove       : '> .label > .delete.icon',
              siblingLabel : '.label',
              menu         : '.menu',
              message      : '.message',
              menuIcon     : '.dropdown.icon',
              search       : 'input.search, .menu > .search > input',
              text         : '> .text:not(.icon)'
            }
            </div>
          </td>
        </tr>
        <tr>
          <td>regExp</td>
          <td colspan="2">
            <div class="code">
            regExp : {
              escape   : /[-[\]{}()*+?.,\\^$|#\s]/g,
            }
            </div>
          </td>
        </tr>
        <tr>
          <td>metadata</td>
          <td colspan="2">
            <div class="code">
            metadata : {
              defaultText     : 'defaultText',
              defaultValue    : 'defaultValue',
              placeholderText : 'placeholderText',
              text            : 'text',
              value           : 'value'
            }
            </div>
          </td>
        </tr>
        <tr>
          <td>className</td>
          <td colspan="2">
            <div class="code">
            className : {
              active      : 'active',
              addition    : 'addition',
              animating   : 'animating',
              disabled    : 'disabled',
              dropdown    : 'ui dropdown',
              filtered    : 'filtered',
              hidden      : 'hidden transition',
              item        : 'item',
              label       : 'ui label',
              loading     : 'loading',
              menu        : 'menu',
              message     : 'message',
              multiple    : 'multiple',
              placeholder : 'default',
              search      : 'search',
              selected    : 'selected',
              selection   : 'selection',
              upward      : 'upward',
              visible     : 'visible'
            }
            </div>
          </td>
        </tr>
        <tr>
          <td>name</td>
          <td>Dropdown</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>silent</td>
          <td>False</td>
          <td>Silences all console output including error messages, regardless of other debug settings.</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>False</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides performance stats in console, and suppresses other debug output.</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>error</td>
          <td colspan="2">
            <div class="code">
            error   : {
              action       : 'You called a dropdown action that was not defined',
              alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
              labels       : 'Allowing user additions currently requires the use of labels.',
              method       : 'The method you called is not defined.',
              noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
            }
            </div>
          </td>
        </tr>
      </tbody>
    </table>

  </div>

</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
